<template>
    <div>
      <div class="server">
        <p>真诚的服务,全面满足您的电商需求</p>
        <div class="phone">
          <span>手&nbsp;&nbsp;&nbsp;机：</span>
          <input type="text" placeholder="您的手机号码(必填)" name="phone" v-model="phone" @blur="checkphone" id="phone"
                 onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
        </div>
        <div class="code">
          <span>验证码：</span>
          <input type="text" placeholder="请输入验证码(必填)" name="code" id="code"
                 onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">

          <div class="getcode"  v-show="show" @click="getcode">
            获取验证码
          </div>
          <div v-show="!show" class="getcode" style="color: #333;">{{count}}s</div>
        </div>
        <div style="width: 92vw;height: auto;margin: 0px auto;">
          <p style="float: left;font-size: 13px;color: #333;margin-top: 5vw;">您的需求:</p>
          <textarea type="text" placeholder="请在此留下您的业务需求，项目经理将及时与您联系..." id="text" >
          </textarea>
        </div>
        <button @click="submit">提交</button>
      </div>
    </div>
</template>

<script>
  import qs from'qs'
    export default {
        name: "server",
      data(){
          return{
            show:'true',
            count:'',
            phone:'',
            code:[],
          }
      },
      methods:{
        submit(){
          const phone_val = $.trim($("#phone").val());
          const code_val = $.trim($("#code").val());
          if(phone_val == ''||code_val == ''){
            this.$toast('您的手机号或是验证码暂未输入');
          }
          const text = $("#text").val();
          console.log(this.code);
          if (this.code = code_val) {
            var that=this;
            this.$http({
              url:'/offcial/index.php/index/Acticle/CompareCode',
              method:'post',
              data:{
                tel:phone_val ,
                code:code_val,
                msg:text,
                time:this._globe.time1,
                device_id:this._globe.device_id,
                version:this._globe.version,
                platform:this._globe.platform,
                token:this._globe.token1,
              }
            })
              .then(function (response) {
                /*console.log(response);*/
                const resData=response.data;
                if(resData.code==1){
                  that.code = resData.code;
                  console.log(that.code);
                  $("#phone").val("");
                  $("#code").val("");
                  $("#text").val("");
                  that.$toast("您的需求提交成功，我们将尽快给您处理")
                }
              })
              .catch(function (response) {
                console.log(response);
              });
          }else{
            this.$toast('您的验证码输入不正确哦')
          }
        },
          getcode(){
            const regphone = new RegExp(/^1[3458]\d{9}$/);
            if (regphone.test(this.phone.trim())){
              const TIME_COUNT = 60;
              if (!this.timer) {
                this.count = TIME_COUNT;
                this.show = false;
                this.timer = setInterval(() => {
                  if (this.count > 0 && this.count <= TIME_COUNT) {
                    this.count--;
                  } else {
                    this.show = true;
                    clearInterval(this.timer);
                    this.timer = null;
                  }
                }, 1000);
                var that=this;
                const phone = $("#phone").val();
                this.$http({
                  url:'/offcial/index.php/index/Acticle/GetCode',
                  method:'post',
                  data:{
                    tel:phone ,
                    time:this._globe.time1,
                    device_id:this._globe.device_id,
                    version:this._globe.version,
                    platform:this._globe.platform,
                    token:this._globe.token1,
                  }
                })
                  .then(function (response) {
                    /*console.log(response);*/
                    const resData=response.data;
                    if(resData.code==1){
                      that.code = resData.data.code;
                      console.log(that.code);

                    }
                  })
                  .catch(function (response) {
                    console.log(response);
                  });
              }else{
                this.$toast('请输入正确的手机号码格式')
              }
            }
          },
        checkphone(){
            const regphone = new RegExp(/^1[3458]\d{9}$/);
            if(!regphone.test(this.phone.trim())){
              this.$toast('请输入正确的手机号码格式')
            }
        },
      }
    }
</script>

<style scoped lang="scss">
  @media screen and (max-width: 375px) and (min-width: 320px){
      .getcode{
        font-size: 11px !important;
        width: 23vw !important;
      }
    input{
      margin-top: 4vw !important;
    }
  }
.server{
  width: 100vw;
  height: auto;
  background: #fff;
  padding-top: 6.4vw;
  button{
    width: 92vw;
    height: 12vw;
    background: #FF4C50;
    -webkit-border-radius: 1.2vw;
    -moz-border-radius: 1.2vw;
    border-radius: 1.2vw;
    border: none;
    color: #fff;
    font-size: 13px;
    margin-top: 4.67vw;
  }
    p{
      font-size: 17px;
      color: #333;
    }
  input{
    border: none;
    background: #f5f5f5;
    justify-content: center;
    float: left;
    margin-top: 4vw;
    width: 50%;
  }
  .phone{
     width: 92vw;
     height: 13vw;
     background: #f5f5f5;
     margin: 0px auto;
     margin-top: 6vw;
        span{
          font-size: 13px;
          line-height: 13vw;
          color: #333;
          width: 20%;
          text-align: right;
          display: inline-block;
          float: left;
        }
   }
  .code{
    width: 92vw;
    height: 13vw;
    background: #f5f5f5;
    margin: 0px auto;
    margin-top: .7vw;
    .getcode{
      color: #FF4C50;
      font-size: 13px;
      float: right;
      margin-top: 3vw;
      cursor: pointer;
      border-left: 1px solid #ccc;
      width: 22vw;
      height: 7vw;
      line-height: 7vw;
      padding-left: 3vw;
      position: relative;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      right: 3vw;
    }
      span{
        font-size: 13px;
        line-height: 13vw;
        color: #333;
        width: 20%;
        text-align: right;
        display: inline-block;
        float: left;
      }
  }
}
  input::placeholder{
    color: #999;
    font-size: 13px;
  }
  textarea{
    width: 92vw;
    height: 26.67vw;
    border: 1px solid #f5f5f5;
    background:#f5f5f5;
    margin-top: 4vw;
    padding: 1vw;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
textarea::placeholder{
  color: #999;
  font-size: 13px;
}
</style>
